<template>
  <div class="myTop" :class="color">
    <h4>登录</h4>
    <p class="smallNav"></p>
    <p class="p2" @click="ck"></p>
  </div>
</template>

<script>
export default {
  name:'myTop',
  data(){
    return {
      color:''
    }
  },
  methods :{
    ck(){
      this.$router.push('/set')
      this.$store.commit('judge')
    }
  },
  mounted(){
    this.color = this.$store.getters.color
  }
}
</script>

<style lang="scss" scoped>
  .myTop{
    display: flex;
    width: 100%;
    height: 18vw;
    // background-color: #37c2bb;
    // border-bottom: 2px solid #000;
    line-height: 18vw;
    position: fixed;
    h4{
      color: white;
      // text-align: center;
      padding-left: 25px;
    }
    .smallNav{
      height: 20px;
      width: 20px;
      background-size: 215%;
      background-image: url(#{$URL}my/icon.png);
      background-position: 0px 0px;
      margin-left: 230px;
      margin-top: 25px;
    }
    .p2{
      height: 20px;
      width: 20px;
      background-size: 190%;
      background-image: url(#{$URL}my/icon.png);
      background-position: -18px 0px;
      margin-left: 20px;
      margin-top: 25px;
    }
  }
</style>